<template>
    <div id="tmpl">
        <mt-header fixed title="Vue商城系统">
            <router-link to="/goods/goodslist" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
        </mt-header>
        <div class="silder">
            <slider :imgs="imgs"></slider>
        </div>
        <!--2.0 实现商品购买区-->
        <div id="buy">
            <h4 v-text="goodsinfo.title"></h4>
            <p class="line"></p>
            <ul>
                <li class="price">
                    市场价:
                    <s>￥ {{goodsinfo.market_price}}</s> 销售价：
                    <span>￥{{goodsinfo.sell_price}}</span>
                </li>
                <li class="inputli">
                    购买数量：
                    <inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber>
                </li>
                <li>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>
                </li>
            </ul>
        </div>
    
        <div id="params">
            <h6>商品参数</h6>
            <p class="line"></p>
            <ul>
                <li>商品货号：{{goodsinfo.goods_no}}</li>
                <li>库存情况：{{goodsinfo.stock_quantity}}</li>
                <li>上架时间：{{goodsinfo.add_time | datefmt('YYYY-MM-DD')}}</li>
            </ul>
        </div>
    
        <div id="other">
            <router-link v-bind="{to:'/goods/goodsdsc/'+id}">
                <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
            </router-link>
            <router-link v-bind="{to:'/goods/goodscomment/'+id}">
                <mt-button type="danger" size="large">商品评论</mt-button>
            </router-link>
        </div>
    </div>
</template>

 <script type="text/ecmascript-6">
import { Toast } from 'mint-ui'
import common from '../../kits/common.js'
import slider from '../subcom/slide.vue'
import inputnumber from '../subcom/inputNumber.vue'
import { vm, COUNTSTR } from '../../kits/vm.js'
import { setItem, valueObj } from '../../kits/localSg.js'

export default {
    components: {
        slider,
        inputnumber
    },
    data() {
        return {
            inputNumberCount: 1,
            imgurl: "http://ofv795nmp.bkt.clouddn.com/",
            id: 0,
            imgs: [],
            goodsinfo: {}
        }

    },
    created() {
        this.id = this.$route.params.id
        // console.log(this.id);
        this.getsildeimgs()
        this.getinfo()
    },
    methods: {
        toshopcar() {
            //COUNTSTR是事件的名称，在订阅事件的模块中要用this.xxx是要发送的数据
            vm.$emit(COUNTSTR, this.inputNumberCount)
            valueObj.goodsid = this.id;
            valueObj.count = this.inputNumberCount;
            setItem(valueObj)
        },

        getcount(count) {
            console.log(count);
            this.inputNumberCount = count;
        },
        getsildeimgs() {
            var url = common.apidomain + "/api/getthumimages/" + this.id;
            this.$http.get(url).then(function (response) {
                if (response.body.status != 0) {
                    Toast(response.body.message);
                    return;
                }
                console.log(response.body.message)
                this.imgs = response.body.message;
                for (var i = 0; i < this.imgs.length; i++) {
                    this.imgs[i].img = this.imgurl + this.imgs[i].src
                }
            })
        },

        getinfo() {
            var url = common.apidomain + "/api/goods/getinfo/" + this.id;
            this.$http.get(url).then(function (response) {
                if (response.body.status != 0) {
                    Toast(response.body.message);
                    return;
                }
                console.log(response.body.message)
                this.goodsinfo = response.body.message[0];
            })
        }
    }
}
</script>

<style scoped >
.silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
}

#buy,
#params,
#other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
}

.line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

#buy ul,
#params ul {
    padding-left: 0px;
}

#buy h4 {
    color: #0094ff;
    padding: 5px;
}

#buy li,
#params li {
    list-style: none;
    padding: 8px;
}

#buy .price span {
    color: red;
}

#other .imgdesc {
    margin-bottom: 20px;
}

.inputli {
    position: relative;
}

.inputnumber {
    position: absolute;
    left: 100px;
    top: 5px;
}
</style>
